<template>
  <div id="problem">
    <v-header title="问题清单" :saveShow="false" :showDownloadBtn="false"></v-header>
    <div class="problemCon">
      <div class="problem_main">
        <div class="problem_header">
          <div class="condition">
            <el-row>
              <el-col :span="1">
                <span>类型:</span>
              </el-col>
              <el-col :span="22">
                <el-checkbox-group v-model="BugsType" @change="checkTypes">
                  <el-checkbox v-for="type in typeList" :label="type.val" :key="type.val">{{type.name}}</el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </div>
          <div class="condition">
            <el-row>
              <el-col :span="1">
                <span>版本:</span>
              </el-col>
              <el-col :span="22">
                <el-checkbox-group v-model="versionType" @change="checkTypes">
                  <el-checkbox v-for="version in versionList" :label="version.ver_num" :key="version.ver_num">{{version.ver_num}}</el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </div>
          <div class="condition">
            <el-row>
              <el-col :span="1">
                <span>状态:</span>
              </el-col>
              <el-col :span="22">
                <el-checkbox-group v-model="bugStatus" @change="checkTypes">
                  <el-checkbox v-for="status in bugStatusList" :label="status.val" :key="status.val">{{status.name}}</el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </div>
          <div class="condition">
            <el-row>
              <el-col :span="1">
                <span>等级:</span>
              </el-col>
              <el-col :span="22">
                <el-checkbox-group v-model="exp_levels" @change="checkTypes">
                  <el-checkbox v-for="status in level_lists" :label="status.val" :key="status.val">{{status.label}}</el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </div>
          <div class="condition dates">
            <el-row>
              <el-col :span="1">
                <span style="margin-top: 6px;">日期:</span>
              </el-col>
              <el-col :span="22">
                <el-date-picker
                  size="small"
                  v-model="dates"
                  type="daterange"
                  :picker-options="pickerOptions1"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-col>
            </el-row>
          </div>
          <div class="header_btm">
            <div class="btm_right">
            </div>
          </div>
        </div>
        <div class="problem_list">
          <div class="problem-box" v-if="bugslList.length > 0" v-loading="loading">
              <div class="item" v-for="bug in bugslList" :key="bug.exp_ID">
                <div class="cont">
                  <div class="tit">
                    <h4>{{ bug.exp_title }}</h4>
                    <span class="s-flag" v-if="bug.exp_status === '0'">未解决</span>
                    <span class="s-flag finished" v-if="bug.exp_status === '1'">已解决</span>
                  </div>
                  <div class="text">
                    <span v-if="bug.exp_type === '0'" class="badge badge1">异常</span>
                    <span v-if="bug.exp_type === '1'" class="badge badge2">崩溃</span>
                    <span v-if="bug.exp_type === '2'" class="badge badge3">卡顿</span>
                    <p><span @click="go({id: 1, app_ver: bug.app_ver, exp_info: bug.exp_info, bug_hap_cnt: bug.bug_hap_cnt, bug_dev_cnt: bug.bug_dev_cnt, bug_user_cnt: bug.bug_user_cnt, dev_id: bug.dev_id, exp_title: bug.exp_title, exp_desc: bug.exp_desc})">{{ bug.exp_desc }}</span></p>
                   <!--  <el-button type="primary">修复</el-button> -->
                    <div class="grade_style">
                      <span>等级：</span>
                      <el-select
                          size="small"
                          v-model="bug.exp_level"
                          placeholder="请选择"
                          :disabled="bug.exp_status === '1'"
                          @change="changeBugLevel(bug.exp_level, bug.exp_title, bug.exp_desc, bug.app_ver)">
                        <el-option
                            v-for="item in level_lists"
                            :key="item.val"
                            :label="item.label"
                            :value="item.val"></el-option>
                      </el-select>
                    </div>
                    <div class="rt-tool">
                      <span>指派给：</span>
                      <el-select v-model="bug.exp_assign"
                                 size="small"
                                 placeholder="请选择"
                                 :disabled="bug.exp_status === '1'"
                                 @change="selectUser(bug.exp_assign, bug.exp_title, bug.exp_desc, bug.app_ver)">
                        <el-option
                          v-for="item in userList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <ul class="details-box">
                    <li>发生次数: {{ bug.bug_hap_cnt }}</li>
                    <li>影响机型数: {{ bug.bug_dev_cnt }}</li>
                    <li>影响用户数: {{ bug.bug_user_cnt }}</li>
                    <li>版本: {{ bug.app_ver }}</li>
                    <li>发生日期：{{ bug.exp_hap_time }}</li>
                  </ul>
                </div>
              </div>
          </div>
          <div class="no_record" v-else>
              <span>暂无数据哦</span>
          </div>
          <div class="block pagination-box">
            <el-pagination
              @current-change="handleCurrentChange"
              @prev-click="prevClick"
              @next-click="nextClick"
              :pageSize="pageSize"
              layout="total, prev, pager, next"
              :total="Number(total)">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import canvasLine from './comm/canvasLine/canvasLine'
import { VHeader } from '../../components'
import { nextPage, getDateTime } from '../../assets/js/index'
import ajax from '../../api/ajax/ajax'
import api from '../../api/url'
import 'echarts/lib/component/tooltip'
import { mixinParams } from '../../assets/js/mixin1'
import { mapGetters, mapMutations } from 'vuex'
export default {
  components: {
    VHeader,
    canvasLine
  },
  mixins: [mixinParams],
  data () {
    return {
      selectList: ['按提交时间', '按更新时间', '按优先级', '按崩溃次数', '按崩溃影响机型数', '按崩溃影响用户数'],
      selecttime: '',
      user: '',
      grade_item: '',
      userList: [],
      BugsType: [],
      versionType: [],
      exp_levels: [],
      level_lists: [{val: '0', label: '未分级'}, {val: '1', label: '紧急'}, {val: '2', label: '高'}, {val: '3', label: '普通'}, {val: '4', label: '低'}],
      typeList: [{name: '卡顿', val: '2'}, {name: '崩溃', val: '1'}, {name: '异常', val: '0'}],
      versionList: ['1.0', '2.0', '3.0'],
      bugStatusList: [{name: '已解决', val: '1'}, {name: '未解决', val: '0'}],
      bugStatus: [],
      bugslList: [],
      pageSize: 10,
      total: '', // 当前查询的总条数
      nowPage: '', // 当前页
      lineOption: {
        tooltip: {
            formatter: function () {
              return 10
            }
        },
        xAxis: {
          data: [],
          axisLine: {
            'show': false
          }
        },
        yAxis: {
          axisLine: {
            'show': false
          },
          splitLine: {
            'show': false
          },
          axisLabel: {
            'show': false
          },
          axisTick: {
            'show': false
          }
        },
        series: [{
          type: 'line',
          data: [0, 1, 0, 0, 0],
          center: ['0', '20%']
        }],
        grid: {
          top: 20,
          x: 0,
          y2: 40
        }
      },
      loading: true,
      dates: [],
      from_date: '',
      to_date: '',
      pickerOptions1: { // 推送禁止定时时间
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e7
        }
      }
    }
  },
  watch: {
    appFlag: {
      handler (val) {
        if (val) {
          this.addFlag = true
          nextPage('/home/bugIndex')
          this.pd_updatePath('/home/bugIndex')
        }
      }
    },
    dates (arr) {
      if (arr !== null) {
        this.from_date = getDateTime(arr[0], 'day') + ' 00:00:00'
        this.to_date = getDateTime(arr[1], 'day') + ' 23:59:59'
        this.queryAllBugs()
      } else {
        this.from_date = ''
        this.to_date = ''
        this.queryAllBugs()
      }
    }
  },
  computed: {
    ...mapGetters([
      'bugListOpt'
    ])
  },
  methods: {
    ...mapMutations([
      'updateBugListOpt'
    ]),
    // 修改bug
    changeBugLevel (level, tit, desc, ver) {
      let params = {
        exp_level: level,
        exp_title: tit,
        exp_desc: desc,
        app_ver: ver
      }
      ajax.post(api.UPDATE_BUG_LEVEL, params)
        .then(res => {
          if (res.data) {
            this.$message({
              type: 'success',
              message: '等级修改成功'
            })
          }
        })
    },
    selectUser (assign, title, desc, v) {
      let params = {
        exp_assign: assign,
        exp_title: title,
        exp_desc: desc,
        app_ver: v
      }
      ajax.post(api.POST_PROBLEM, params)
        .then(res => {
          this.$message({
            type: 'success',
            message: '指派成功'
          })
        })
    },
    repairBug (title, desc, v) {
      let params = {
        exp_title: title,
        exp_desc: desc,
        app_ver: v
      }
      ajax.post(api.REPAIR_BUG, params)
        .then(res => {
          this.queryAllBugs()
        })
    },
    queryUserList () {
      ajax.post(api.QUERY_USERLIST)
        .then(res => {
          this.userList = res.data.user_list
          this.loading = false
        })
    },
    queryVersionList () {
      ajax.post(api.SELECT_APP_VERSION_LIST)
        .then(res => {
          this.versionList = res.data.list
        })
    },
    go (params) {
      let buglistopt = params
      this.updateBugListOpt(buglistopt)
      nextPage('/home/problemInfo')
    },
    handleCommand (command) {},
    handleCurrentChange (val) {
      this.nowPage = val
      let params = {
        pageNo: this.nowPage,
        pageSize: this.pageSize,
        keyword: '',
        exp_types: this.BugsType,
        app_vers: this.versionType,
        exp_statuss: this.bugStatus,
        from_date: this.from_date,
        to_tate: this.to_date
      }
      ajax.post(api.SELECT_ALL_BUGS, params)
        .then(res => {
          this.bugslList = res.data.list
          this.total = res.data.total
          this.nowPage = res.data.curr_num
        })
    },
    prevClick () {
      this.nowPage--
      let params = {
        pageNo: this.nowPage,
        pageSize: this.pageSize,
        keyword: '',
        exp_types: this.BugsType,
        app_vers: this.versionType,
        exp_statuss: this.bugStatus,
        from_date: this.from_date,
        to_tate: this.to_date
      }
      ajax.post(api.SELECT_ALL_BUGS, params)
        .then(res => {
          this.bugslList = res.data.list
          this.total = res.data.total
          this.nowPage = res.data.curr_num
        })
    },
    nextClick () {
      this.nowPage++
      let params = {
        pageNo: this.nowPage,
        pageSize: this.pageSize,
        keyword: '',
        exp_types: this.BugsType,
        app_vers: this.versionType,
        exp_statuss: this.bugStatus,
        from_date: this.from_date,
        to_tate: this.to_date
      }
      ajax.post(api.SELECT_ALL_BUGS, params)
        .then(res => {
          this.bugslList = res.data.list
          this.total = res.data.total
          this.nowPage = res.data.curr_num
        })
    },
    // 条件筛选-查询
    checkTypes (val) {
      let params = {
        'pageNo': '1',
        'pageSize': this.pageSize,
        'keyword': '',
        'exp_levels': this.exp_levels,
        'exp_types': this.BugsType,
        'app_vers': this.versionType,
        exp_statuss: this.bugStatus,
        from_date: this.from_date,
        to_tate: this.to_date
      }
      ajax.post(api.SELECT_ALL_BUGS, params)
        .then(res => {
          this.bugslList = res.data.list
          this.total = res.data.total
          this.nowPage = res.data.curr_num
        })
    },
    // 查询所有
    queryAllBugs () {
      let params = {
        'pageNo': '1',
        'keyword': '',
        'exp_levels': this.exp_levels,
        'exp_types': this.BugsType,
        'app_vers': this.versionType,
        'pageSize': this.pageSize,
        exp_statuss: this.bugStatus,
        from_date: this.from_date,
        to_tate: this.to_date
      }
      ajax.post(api.SELECT_ALL_BUGS, params)
        .then(res => {
          this.bugslList = res.data.list
          this.total = res.data.total
          this.nowPage = res.data.curr_num
        })
    }
  },
  mounted () {
    if (this.$route.query.expType === undefined) {
      this.BugsType = []
    } else if (this.$route.query.expType === '-1') {
      this.BugsType = ['0', '1', '2']
    } else {
      this.BugsType.push(this.$route.query.expType)
    }
    this.queryAllBugs()
    this.queryVersionList()
    this.queryUserList()
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  #problem
    height 100%
    .demonstration
      font-size 14px
      color #8492a6
      line-height 32px
    .right
      float right
    .left
      float left
    .problemCon
      height calc(100% - 56px)
      overflow: auto
      margin 10px 0 0 10px
      padding-right 10px
      .mymenu
        .el-menu-item
          height 30px
          line-height 30px
      .left_menu
        background-color #fff
        width 300px
        float left
        margin-right 19px
        .left_title
          padding 10px 25px
      .problem_main
        text-align left
        background-color #fff
        width 100%
        .problem_header
          border-bottom 1px solid rgb(240, 240, 240)
          .header_btm
            padding 10px 25px
          .mymenu
            width 200px
          width 100%
          .header_top, .condition
            padding 10px 25px
          .dates .el-col-1
            padding-top 5px
          .header_top:after, .btm_right:after
            content ''
            display table
            clear both
          .search_box
            float right
            .problem_search
              float left
              margin-right 10px
        /* .problem_list
          text-align left
          .list:after
            content ''
            display table
            clear both
          .list:hover
            background-color #ecf9ff
          .list
            padding 10px 25px
            border-bottom 1px solid rgb(240, 240, 240)
            .list_icon
              img
                width 80px
                height 80px
              margin-right 10px
            .list_container
              .errtype
                color #2196f3
              .list_footer
                display flex
                justify-content space-between
                .echartline
                  .echarts
                    width 160px
                    height 50px !important
                span
                  margin-right 25px */
        .problem-box
          .item
            padding 15px
            overflow hidden
            border-bottom 1px solid #f0f0f0
            position relative
            // cursor pointer
            // &:hover
            //   background-color #ecf9ff
            /*.pic
              float left
              min-width 100px
              min-height 100px
              background red
              position relative
              img
                position absolute
                width 100px
                height 100px
                left 0
                top 0*/
            .cont
              min-height 100px
              bacground green
              .tit
                position relative
                h4
                  height 24px
                  line-height 24px
                  font-size 14px
                  font-weight normal
                .s-flag
                  position absolute
                  right 0
                  top 0
                  line-height 24px
                  font-size 12px
                  color #333
                  &.finished
                    color #999
              .text
                padding 10px 180px 10px 0
                position relative
                .badge
                  float left
                  position relative
                  top 4px
                  margin-right 5px
                  font-size 10px
                  height 16px
                  line-height 16px
                  padding 0 5px
                  border-radius 3px
                  color #fff
                  background red
                  &.badge1
                    background #f3983e
                  &.badge2
                    background #ed4134
                  &.badge3
                    background #673ab7
                p
                  white-space nowrap
                  text-overflow ellipsis
                  color #016DFB
                  overflow hidden
                  line-height 24px
                  max-width 620px
                  & span
                    &:hover
                      cursor pointer
                      text-decoration underline
                .grade_style
                  position absolute
                  right 230px
                  top 50%
                  height 40px
                  line-height 40px
                  margin-top -15px
                  & > span, .el-select
                    display inline-block
                    vertical-align top
                    height 30px
                  & > span
                    width 80px
                    font-size 13px
                    color #999
                    text-align right
                  .el-select
                    width 120px
                .rt-tool
                  position absolute
                  right 0
                  top 50%
                  height 30px
                  line-height 30px
                  margin-top -15px
                  & > span, .el-select
                    display inline-block
                    vertical-align top
                    height 40px
                    line-height 40px
                  & > span
                    width 80px
                    font-size 13px
                    color #999
                    text-align right
                  .el-select
                    width 120px
                    margin-right 0
              .details-box
                margin-top 5px
                overflow hidden
                li
                  float left
                  width 20%
                  color #666
                  font-size 13px
                  line-height 24px
  .pagination-box
    .el-pagination
      padding 10px 15px 10px 0
      line-height 30px
      text-align right
  .no_record
    padding 20px
    span
        display block
        line-height 48px
        height 48px
        font-size 14px
        color #999
        text-align center
        position relative
        &:before
            content '\e658'
            display inline-block
            vertical-align top
            height 48px
            font-size 48px
            margin-right 5px
            color #999
            font-family 'iconfont'
</style>
<style>
.mymenu>.el-submenu>.el-submenu__title {
  height: 40px;
  line-height: 20px;
}
.problem_search>.el-input>.el-input__prefix>.el-input__icon{
  line-height: 30px;
}
</style>
